Conversation
mjumbewu
left a comment
mjumbewu
left a comment
There was a problem hiding this comment.
Hey, I like the overlay second slide -- it's a nice effect. I do wonder what it does for the flow of the content for non-visual user agents though (like screen readers). I bet there's a way to do it without disrupting the content flow.
Otherwise, just a couple tips below! Also, in your repository Settings, enable GitHub Pages so that your story map is available at https://MeixiChai.github.io/story-map-project/
There was a problem hiding this comment.
suggestion: For something like a story map that is intended for public consumption, I'd consider how to reduce the size of my data files when possible, as these will take a long while to load over slower network connections. For example:
- In this file, there are quite a few attributes on each feature that are unused. Once you know what you need for styling and popups, I would pare down any other attributes.
- Many GIS files contain an absurd number of decimal places for coordinates. Seven decimal places is approximately centimeter-level precision (see https://wiki.openstreetmap.org/wiki/Precision_of_coordinates), but your coordinates have 15 decimal places. Cutting those down can significantly reduce the size of GeoJSON files.
| const scrollPos = window.scrollY - this.container.offsetTop; | ||
| const windowHeight = window.innerHeight; | ||
|
|
||
| let i; | ||
| for (i = 0; i < this.slides.length; i++) { | ||
| const slidePos = | ||
| this.slides[i].offsetTop - scrollPos + windowHeight * 0.7; | ||
| if (slidePos >= 0) { | ||
| break; | ||
| } | ||
| } |
There was a problem hiding this comment.
suggestion: Try using this instead for the calculation of when the slide should transition. I've never been particularly satisfied with the slide-transition logic I was using, but after reasoning it out, I think this works much better with your static overlay slide:
| const scrollPos = window.scrollY - this.container.offsetTop; | |
| const windowHeight = window.innerHeight; | |
| let i; | |
| for (i = 0; i < this.slides.length; i++) { | |
| const slidePos = | |
| this.slides[i].offsetTop - scrollPos + windowHeight * 0.7; | |
| if (slidePos >= 0) { | |
| break; | |
| } | |
| } | |
| // Height of the viewport | |
| const windowHeight = window.innerHeight; | |
| // How far down the page we've scrolled so far; calculated from the top of | |
| // the page | |
| const scrollPos = window.scrollY; | |
| // Amount of next slide that must be visible above the bottom of the window | |
| // to trigger a slide transition | |
| const scrollPeek = 64; | |
| // When the next slide peeks above the bottom of the viewport a certain | |
| // amount, we consider that we've reached the next slide. | |
| const currentSlideThreshold = scrollPos + windowHeight - scrollPeek; | |
| // Create a variable to hold the index of each slide as we check it. | |
| let i; | |
| // Start from the last slide and work backwards to find the current slide. | |
| for (i = this.slides.length - 1; i > 0; i--) { | |
| const slidePos = | |
| this.slides[i].offsetTop + this.container.offsetTop; | |
| if (slidePos <= currentSlideThreshold) { | |
| break; | |
| } | |
| } |
2 participants
Philadelphia Vacant Lots Transform into Green Spaces
This story map explores how Philadelphia is addressing its long-standing issue of vacant and abandoned lots by transforming them into productive green spaces. Using city and Pennsylvania Horticultural Society datasets, the project visualizes the scale of vacancy, the reach of the LandCare Program, and the social, environmental, and economic benefits of “clean and green” interventions.
The target audience includes urban planners, policymakers, and residents interested in neighborhood revitalization and equitable greening.